<template>
  <Modal :value="getWarofTheDragonShowModal" title="龙战" width="970" height="580" @on-ok="onCancel" @on-cancel="onCancel">
    <div class="img_h_style">
      <div class="img_v_style">
        <canvas width="180" height="90"/>
        <img v-bind:src="img1" width="180" height="180"/>
        <img v-bind:src="img2" width="180" height="180"/>
        <img v-bind:src="img3" width="180" height="180"/>
        <canvas width="180" height="90"/>
      </div>
      <div class="img_v_style">
          <canvas width="180" height="45"/>
          <img v-bind:src="img4" width="180" height="180"/>
          <img v-bind:src="img5" width="180" height="180"/>
          <img v-bind:src="img6" width="180" height="180"/>
          <img v-bind:src="img7" width="180" height="180"/>
          <canvas width="180" height="45"/>
      </div>
      <div  class="img_v_style">
          <img v-bind:src="img8" width="180"  height="180"/>
          <img v-bind:src="img9" width="180" height="180"/>
          <img v-bind:src="img10" width="180" height="180"/>
          <img v-bind:src="img11" width="180" height="180"/>
          <img v-bind:src="img12" width="180" height="180"/>
      </div>
      <div  class="img_v_style">
          <canvas width="180" height="45"/>
          <img v-bind:src="img13" width="180" height="180"/>
          <img v-bind:src="img14" width="180" height="180"/>
          <img v-bind:src="img15" width="180" height="180"/>
          <img v-bind:src="img16" width="180" height="180"/>
          <canvas width="180" height="45"/>
      </div>
      <div class="img_v_style">
          <canvas width="180" height="90"/>
          <img v-bind:src="img17" width="180" height="180"/>
          <img v-bind:src="img18" width="180" height="180"/>
          <img v-bind:src="img19" width="180" height="180"/>
          <canvas width="180" height="90"/>
      </div>
    </div>
    <diV slot="footer">
      <Button type="primary" @click="lastPage()" v-bind:disabled="lastFlag">上一页</Button>
      <Button type="primary" @click="nextPage()" v-bind:disabled="nextFlag">下一页</Button>
    </diV>
  </Modal>
</template>

<script>
import img60011 from '@/assets/game/slot_warofthedragon/img60011.png'
import img60021 from '@/assets/game/slot_warofthedragon/img60021.png'
import img60031 from '@/assets/game/slot_warofthedragon/img60031.png'
import img60041 from '@/assets/game/slot_warofthedragon/img60041.png'
import img60051 from '@/assets/game/slot_warofthedragon/img60051.png'
import img60061 from '@/assets/game/slot_warofthedragon/img60061.png'
import img60071 from '@/assets/game/slot_warofthedragon/img60071.png'
import img60081 from '@/assets/game/slot_warofthedragon/img60081.png'
import img60091 from '@/assets/game/slot_warofthedragon/img60091.png'
import img60101 from '@/assets/game/slot_warofthedragon/img60101.png'
import img60111 from '@/assets/game/slot_warofthedragon/img60111.png'
import img60121 from '@/assets/game/slot_warofthedragon/img60121.png'
import img60131 from '@/assets/game/slot_warofthedragon/img60131.png'
import img60141 from '@/assets/game/slot_warofthedragon/img60141.png'
import img60151 from '@/assets/game/slot_warofthedragon/img60151.png'
import img60161 from '@/assets/game/slot_warofthedragon/img60161.png'
export default {
  props: ['recordData', 'showWTDModal'],
  data () {
    return {
      curPage: 1,
      imgMap: {},
      curIndex: 0,
      lastFlag: false,
      nextFlag: false,
      img60011,
      img60021,
      img60031,
      img60041,
      img60051,
      img60061,
      img60071,
      img60081,
      img60091,
      img60101,
      img60111,
      img60121,
      img60131,
      img60141,
      img60151,
      img60161,
      img1: '',
      img2: '',
      img3: '',
      img4: '',
      img5: '',
      img6: '',
      img7: '',
      img8: '',
      img9: '',
      img10: '',
      img11: '',
      img12: '',
      img13: '',
      img14: '',
      img15: '',
      img16: '',
      img17: '',
      img18: '',
      img19: ''
    }
  },
  created () {
    this.imgMap['60011'] = img60011
    this.imgMap['60021'] = img60021
    this.imgMap['60031'] = img60031
    this.imgMap['60041'] = img60041
    this.imgMap['60051'] = img60051
    this.imgMap['60061'] = img60061
    this.imgMap['60071'] = img60071
    this.imgMap['60081'] = img60081
    this.imgMap['60091'] = img60091
    this.imgMap['60101'] = img60101
    this.imgMap['60111'] = img60111
    this.imgMap['60121'] = img60121
    this.imgMap['60131'] = img60131
    this.imgMap['60141'] = img60141
    this.imgMap['60151'] = img60151
    this.imgMap['60161'] = img60161
    console.log('this.imgMap:' + this.imgMap)
  },
  methods: {
    lastPage () {
      console.log('lastPage')
      if (this.curPage > 1) {
        this.curPage = this.curPage - 1
        this.onShowData(this.curPage)
      } else {
        this.$Message.info('已经是第一页!')
      }
    },
    nextPage (name) {
      console.log('nextPage')
      if (this.curPage < this.recordData.length - 1) {
        this.curPage = this.curPage + 1
        this.onShowData(this.curPage)
      } else {
        this.$Message.info('已经是最后一页!')
      }
    },
    onCancel () {
      this.curPage = 0
      console.log('onCancel')
      this.$emit('closeWarofTheDragonModal')
    },
    onShowData (index) {
      if (index > this.recordData.length - 1) {
        this.$Message.error('超出数据范围!')
      }
      let _data = this.recordData[index].split(',')
      let _item = _data[0].split('-')
      let _key = '' + _item[0] + _item[1]
      console.log('_key:', _key)
      this.img1 = this.imgMap[_key]
      _item = _data[1].split('-')
      _key = '' + _item[0] + _item[1]
      this.img2 = this.imgMap[_key]
      _item = _data[2].split('-')
      _key = '' + _item[0] + _item[1]
      this.img3 = this.imgMap[_key]
      _item = _data[5].split('-')
      _key = '' + _item[0] + _item[1]
      this.img4 = this.imgMap[_key]
      _item = _data[6].split('-')
      _key = '' + _item[0] + _item[1]
      this.img5 = this.imgMap[_key]
      _item = _data[7].split('-')
      _key = '' + _item[0] + _item[1]
      this.img6 = this.imgMap[_key]
      _item = _data[8].split('-')
      _key = '' + _item[0] + _item[1]
      this.img7 = this.imgMap[_key]
      _item = _data[10].split('-')
      this.img8 = this.imgMap[_key]
      _item = _data[11].split('-')
      _key = '' + _item[0] + _item[1]
      this.img9 = this.imgMap[_key]
      _item = _data[12].split('-')
      _key = '' + _item[0] + _item[1]
      this.img10 = this.imgMap[_key]
      _item = _data[13].split('-')
      _key = '' + _item[0] + _item[1]
      this.img11 = this.imgMap[_key]
      _item = _data[14].split('-')
      _key = '' + _item[0] + _item[1]
      this.img12 = this.imgMap[_key]
      _item = _data[13].split('-')
      _key = '' + _item[0] + _item[1]
      this.img13 = this.imgMap[_key]
      _item = _data[14].split('-')
      _key = '' + _item[0] + _item[1]
      this.img14 = this.imgMap[_key]
      _item = _data[15].split('-')
      _key = '' + _item[0] + _item[1]
      this.img15 = this.imgMap[_key]
      _item = _data[16].split('-')
      _key = '' + _item[0] + _item[1]
      this.img16 = this.imgMap[_key]
      _item = _data[17].split('-')
      _key = '' + _item[0] + _item[1]
      this.img17 = this.imgMap[_key]
      _item = _data[18].split('-')
      _key = '' + _item[0] + _item[1]
      this.img18 = this.imgMap[_key]
      _item = _data[20].split('-')
      _key = '' + _item[0] + _item[1]
      this.img19 = this.imgMap[_key]
      this.curIndex = index
      console.log('this.curIndex:', this.curIndex, ' ,this.recordData.length:', this.recordData.length)
      if (this.curIndex === this.recordData.length - 1) {
        this.nextFlag = true
      } else {
        this.nextFlag = false
      }

      if (this.curIndex === 0) {
        this.lastFlag = true
      } else {
        this.lastFlag = false
      }
    }
  },
  computed: {
    getWarofTheDragonShowModal () {
      console.log('geWarofTheDragonShowModal')
      // let curData = this.recordData[0]
      if (this.recordData.length > 0) {
        console.log(this.recordData[0])
        this.onShowData(this.curIndex)
      }
      return this.showWTDModal
    },
    setWarofTheDragonShowModal () {
      console.log('setWarofTheDragonShowModal')
    }
  }
}
</script>

<style>
.img_v_style {
  	/*flex布局（作用于容器）*/
  width:200px;
  height:580px;
	display:flex;
  flex-direction:column;
}
.img_h_style {
  	/*flex布局（作用于容器）*/
  width:950px;
  height:580px;
	display:flex;
  flex-direction:row;
}

</style>
